<template>
  <div class="container">
    <div class="nav">
      <van-nav-bar title="订单列表" @click-left="$router.back()">
        <template #left>
          <van-icon name="arrow-left" size="1rem" color="black" />
        </template>
      </van-nav-bar>
    </div>
    <ul class="tabs">
      <li :class="tabActive===0 && 'active'" @click="tabActive=0">
        <span>全部</span>
      </li>
      <li :class="tabActive===1 && 'active'" @click="tabActive=1">
        <span>待付款</span>
      </li>
      <li :class="tabActive===2 && 'active'" @click="tabActive=2">
        <span>待发货</span>
      </li>
      <li :class="tabActive===3 && 'active'" @click="tabActive=3">
        <span>待收货</span>
      </li>
      <li :class="tabActive===4 && 'active'" @click="tabActive=4">
        <span>待评价</span>
      </li>
    </ul>
    <div class="content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
          <div class="orderBox" @click="$router.push('/order/detail/1')">
            <div class="orderHeader">
              <div class="headerLeft">
                <span>自营</span>
                <span>小米旗舰店</span>
              </div>
              <div class="headerRight">已关闭</div>
            </div>
            <div class="orderContent">
              <img
                src="https://uniapp.b2b2c.niuteam.cn/upload/9/common/images/20200420/20200420115612158735497285781_mid.jpg"
                alt
              />
              <div class="orderContentRight">
                <span>向日葵花束生日配送鲜花速递 蓝色梦幻</span>
                <div>¥45.00</div>
              </div>
            </div>
            <div class="orderFooter">
              <span>普通订单</span>
              <div class="footerRight">
                共一件商品
                应付:¥45.00
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
      <div style="display:none">
        <van-tabs v-model="tabActive" :swipe-threshold="5" sticky>
          <van-tab title="全部">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
              <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-cell v-for="item in list" :key="item" :title="item" />
              </van-list>
            </van-pull-refresh>
          </van-tab>
          <van-tab title="待付款">内容 2</van-tab>
          <van-tab title="待发货">内容 3</van-tab>
          <van-tab title="待收货">内容 4</van-tab>
          <van-tab title="待评价">内容 4</van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import { Tab, Tabs, NavBar, Icon, List, PullRefresh, Cell } from "vant";
export default {
  components: {
    "van-tabs": Tabs,
    "van-tab": Tab,
    "van-nav-bar": NavBar,
    "van-icon": Icon,
    "van-list": List,
    "van-pull-refresh": PullRefresh,
    "van-cell": Cell
  },
  data() {
    return {
      tabActive: 0,
      list: [],
      loading: false,
      finished: false,
      refreshing: false
    };
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background-color: #f7f7f7;
  .nav {
    height: 2.3rem;
  }
  .tabs {
    height: 2.6rem;
    border-radius: 0 0 0.6rem 0.6rem;
    margin: 0.3rem 0;
    // padding-bottom: 0.5rem;
    background-color: white;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    li {
      display: flex;
      span {
        box-sizing: border-box;
        font-size: 0.7rem;
        padding: 0.45rem 0.2rem;
        color: #555;
      }
    }
    .active {
      span {
        border-bottom: 2px solid #cf2835;
      }
    }
  }
  .content {
    box-sizing: border-box;
    height: calc(100% - 5.5rem);
    overflow-y: scroll;
    padding: 0.2rem 0.4rem;
    .orderBox {
      background-color: white;
      border-radius: 0.6rem;
      padding: 0.4rem;
      .orderHeader {
        display: flex;
        justify-content: space-between;
        .headerLeft {
          span {
            &:nth-child(1) {
              padding: 0.15rem 0.3rem;
              color: white;
              font-size: 0.6rem;
              background-color: #cf2835;
              border-radius: 0.2rem;
            }
            &:nth-child(2) {
              margin-left: 0.2rem;
              font-size: 0.7rem;
              font-weight: 600;
            }
          }
        }
        .headerRight {
          font-size: 0.7rem;
        }
      }
      .orderContent {
        padding: 0.4rem 0;
        display: flex;
        img {
          width: 4.3rem;
          height: 4.3rem;
          border-radius: 0.4rem;
        }
        .orderContentRight {
          width: calc(100% - 4.3rem);
          padding-left: 0.6rem;
          font-size: 0.7rem;
        }
      }
      .orderFooter {
        display: flex;
        justify-content: space-between;
        font-size: 0.7rem;
      }
    }
  }
  .detail {
    margin-top: 0.4rem;
    background-color: white;
  }
}
</style>